<template>
  <div>
    <div class="mainheader">
     <header1>猫眼电影</header1>
     <header2></header2>
    
        
    
    <!-- 子路由的链接 -->
    <nav>
    <div class="nav_left">
            <span class="nav_left_text">深圳</span>
            <span class="nav_left_sanjiao"></span>
        </div>
    <ul class="nav_list">
      <li><router-link to="/movie/hot">热映</router-link></li>
      <li><router-link to="/movie/cinema">影院</router-link></li>
      <li><router-link to="/movie/wait">待映</router-link></li>
      <li><router-link to="/movie/classic">经典电影</router-link></li>
    </ul>
    <div class="search">
            <span> <img src="../../assets/img/ss.png" alt=""></span>
        </div>
     </nav>
     </div>
     
    
    <!-- 子路由的路由出口 -->
    <div class="con">
     
    <router-view></router-view>
     </div>
     </div>
    

    
</template>


<script>

import header1 from "../../components/header1.vue";
import header2 from "../../components/header2.vue";
export default {
  name: "movie",
   //注册
  components: {
    header1,
    header2,
  },
  
};
</script>

<style >
       nav {
            width: 100%;
            height: 44px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
        }
        
        .nav_left {
            width: 62px;
            height: 20px;
            display: flex;
            align-items: center;
        }
        
        .nav_left .nav_left_text {
            font-size: 15px;
            color: #666;
            margin-left: 0.4rem;
        }
        
        .nav_left .nav_left_sanjiao {
            width: 0;
            height: 0;
            border: 4px solid #b0b0b0;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            display: inline-block;
            margin-top: 5px;
            margin-left: 4px;
        }
        
        .nav_list {
            width: 264px;
            height: 44px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .nav_list li {
            text-decoration: none;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            list-style: none;
            text-decoration: none;
        }
        
        .nav_list li:hover {
            border-bottom: 2px solid #f01414;
            font-size: 17px;
            color: #333;
        }
        
        .nav_list li a {
            color: #666;
        }
        .search {
            margin-right: 15px;
        }
        .con {
            margin-top: 160px;
            margin-bottom: 51px;
        }
        .mainheader {
            position: fixed;
            top: 0;
            width: 100%;
            height: 158.5px;
            z-index: 999;
        }
</style>